<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>抢购平台</title>
		<style type="text/css">
			.login-layout{background-size: cover; margin: 0px; padding: 0px;}
			.login-main-container { bottom: 0;content: ""; display: block; max-width: inherit; position: absolute; top: 20%; width: 100%;z-index: 0;}
			.login-container { margin: 0 auto; width: 375px; }
			.space-6 {margin: 6px 0 5px;max-height: 1px;min-height: 1px;overflow: hidden;}
			.header {line-height: 28px; margin-bottom: 16px; margin-top: 18px; padding-bottom: 4px;}
			.position-relative{position: relative;}
			.login-layout .widget-box.visible {position: relative;transform: scale(1, 1) translate(0px);transition: -webkit-transform 0.3s ease 0s;visibility: visible;z-index: auto;}
			.login-layout .widget-box { background: #fff none repeat scroll 0 0; border: 10px solid rgba(111, 106, 106, 0.3); border-radius: 15px; box-shadow: none; padding: 6px;  }
			.login-layout .widget-box.visible { visibility: visible;}
			.login-layout .login-box .widget-main { padding-bottom: 16px; }
			.login-layout .widget-box .widget-main { background: #f7f7f7 none repeat scroll 0 0; padding: 16px 36px 36px; }
			.space-10 {margin: 10px 0 9px;max-height: 1px;min-height: 1px;overflow: hidden;}
			fieldset { border: 0 none; margin: 0; min-width: 0; padding: 0; }
			.login-layout label { margin-bottom: 11px; }
			.block { display: block !important; }
			label { font-size: 14px; font-weight: normal; }
			label { display: inline-block; font-weight: bold; margin-bottom: 5px; }
			span.input-icon { display: inline-block; }
			.input-icon { position: relative;  }
			.login-layout .login-box .widget-main { padding-bottom: 16px; }
			.login-layout .widget-box .widget-main { background: #f7f7f7 none repeat scroll 0 0; padding: 16px 36px 36px; }
			.widget-main { padding: 12px; }

			.form-control { background-color: #ffffff; background-image: none; border: 1px solid #cccccc; border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; color: #555555; display: block; font-size: 14px; height: 34px; line-height: 1.42857; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; width: 100%;  }
			.form-control, select { background-color: #ffffff; border: 1px solid #d5d5d5; border-radius: 0; box-shadow: none !important; color: #858585; }
			input{ background-color: #ffffff; border: 1px solid #d5d5d5; border-radius: 0 !important; box-shadow: none !important;  color: #858585; font-family: inherit; font-size: 14px; transition-duration: 0.1s;  }
			.input-icon.input-icon-right > .ace-icon { left: auto; right: 3px; }
			.input-icon > .ace-icon { bottom: 1px; color: #909090; display: inline-block; font-size: 16px; left: 3px; line-height: 30px; padding: 0 3px; position: absolute; top: 1px; z-index: 2; }
			.ace-icon { text-align: center; }
			.fa { display: inline-block; font-family: FontAwesome; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-size: inherit; font-size-adjust: none; font-stretch: normal; font-style: normal; font-synthesis: weight style; font-variant: normal; font-weight: normal; line-height: 1; text-rendering: auto; }
			.width-100 { width: 100% !important;}
			.btn { background-image: none !important; border: 5px solid #fff; border-radius: 0; box-shadow: none !important; color: #fff !important; cursor: pointer; display: inline-block; margin: 0; position: relative; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); transition: background-color 0.15s ease 0s, border-color 0.15s ease 0s, opacity 0.15s ease 0s; vertical-align: middle;}
			.btn-sm, .btn-group-sm > .btn { border-width: 4px; font-size: 13px; line-height: 1.38; padding: 4px 9px; }
			.btn, .btn-default, .btn:focus, .btn-default:focus { background-color: #abbac3 !important; border-color: #abbac3; }
			.btn-primary, .btn-primary:focus { background-color: #428bca !important; border-color: #428bca; }
			.btn, .btn-default, .btn:focus, .btn-default:focus { background-color: #32aa9f !important; border-color: #32aa9f; }
		</style>

	</head>

	<body class="login-layout">
	<div class="main-container login-main-container">
		<div class="login-container">
			<div class="space-6"></div>
			<h4 class="header blue lighter bigger" style="text-align:center">
				<!--<img src="Public/Images/logo_admin.png"/>-->
			</h4>
			<div class="position-relative">
				<div id="login-box" class="login-box visible widget-box no-border">
					<div class="widget-body">
						<div class="widget-main">
							<div class="space-10"></div>
							<form  id="loginform" action="{:U('Index/doLogin')}" method="post">
								<fieldset>
									<label class="block clearfix">
										<span class="block input-icon input-icon-right">
											<input type="text" class="form-control" name="username" id="username" placeholder="用户名" />
											<i class="ace-icon fa fa-user"></i>
										</span>
									</label>

									<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="password" class="form-control" name="password" id="pwd" placeholder="密码"  maxlength="32"/>
															<i class="ace-icon fa fa-lock"></i>
														</span>
									</label>

									<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="test" name="captcha" id="captcha" autocomplete="off" placeholder="输入验证码" class="form-control" style="width:50%;display:inline" maxlength="4" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
														<span style="float:right;"><img id="code_img" src="{:U('Index/verify')}" onclick="this.src = this.src+'?'+Math.random()"/></span>
														</span>
									</label>

									<div class="clearfix">
										<button type="submit" class="width-100 pull-center btn btn-sm btn-primary">
											<i class="ace-icon fa fa-key"></i>
											<span class="bigger-120">登录</span>
										</button>
									</div>

									<div class="space-4">
									</div>
									<div class="clearfix" style="text-align:center">
										{$baseConf['web_bottom_info']}
									</div>
								</fieldset>
							</form>
						</div><!-- /.widget-main -->
					</div><!-- /.widget-body -->
				</div><!-- /.login-box -->
			</div><!-- /.position-relative -->
		</div>
	</div><!-- /.main-container -->
	<!--<span id="today_bg" data-id="{$today}"></span>-->
	<div class="layui-canvs"></div>
	<div class="layui-layout layui-layout-login">
	<script type="text/javascript" src="__PUBLIC__/layui/lay/dest/layui.all.js"></script>
	<script type="text/javascript" src="__PUBLIC__/js/jquery.js"></script>
	<script type="text/javascript" src="__PUBLIC__/js/scanningLine.js"></script>
	<script type="text/javascript" src="__PUBLIC__/js/jquery.validate.js"></script>
	<script type="text/javascript">
        'use strict';
        layui.use(["jquery"],function(){
                window.jQuery=window.$=layui.jquery;
                $(".layui-canvs").width($(window).width());
                $(".layui-canvs").height($(window).height());
				$(function(){
					$(".layui-canvs").jParticle({
						background: "#141414",
						color: "#E6E6E6"
					});

				});
        });

        $("#loginform").validate({
            rules: {
                pwd: "required",
                username: {
                    required: true,
                    email:true
                },
                password: {
                    required: true,
                    minlength: 6
                }
            },
            messages: {
                username: {
                    required: "请输入用户名",
                    email: "用户名格式不正确"
                },
                password: {
                    required: "请输入您的密码",
                    minlength: "密码长度太短"
                }

            }
        });


	</script>

	</body>
</html>